�bersicht
->
computer und co
->
How to - Bilderanzeige in LocCom
Du editierst Deinen Post in "How to - Bilderanzeige in LocCom "
Hi, also für alle dies interessiert wie man diese mega elegante Javascript - CSS - Bilderanzeige / Galerie hier aus LocCom macht ist hier die Anleitung xD Die Idee und der Code stammt ursprünglich von dieser seite. http://www.huddletogether.com/projects/lightbox2/ Ich kann euch hier aber auch die Daten anbieten die ihr dazu braucht...auf der oben genannten seite muss man sich erst eine Zip-Datei runterladen und muss sich da dann die nötigen Sachen rausziehen...Ich biete euch hier den direkten Code den ihr einfach per Copy and Paste in eurem Editor in die entsprechende datei speichern könnt. Ihr benötigt folgende datein... lightbox.css: http://www.loc-com.de/Forum/css/lightbox.css builder.js: http://www.loc-com.de/Forum/js/builder.js effects.js: http://www.loc-com.de/Forum/js/effects.js lightbox-web.js: http://www.loc-com.de/Forum/js/lightbox-web.js lightbox.js: http://www.loc-com.de/Forum/js/lightbox.js prototype.js: http://www.loc-com.de/Forum/js/prototype.js scriptaculous.js: http://www.loc-com.de/Forum/js/scriptaculous.js so...die css datei kommt in einen ordner der css heißt..die js-dateien in einen der logischerweise js heißt... als nächstes braucht ihr noch ein paar images, die ihr einfach per rechtsklick -> speichern unter, abspeichert...logischerweise in einem ordner der images heißt xD http://www.loc-com.de/Forum/images/close.gif http://www.loc-com.de/Forum/images/closelabel.gif http://www.loc-com.de/Forum/images/loading.gif http://www.loc-com.de/Forum/images/nextlabel.gif http://www.loc-com.de/Forum/images/prevlabel.gif sodala....jetzt haben wirs schon fast geschafft^^ dies drei ordner ladet ihr in das verzeichnis hoch in dem auch das script liegt das darauf zugreift... als nächstes fügt ihr diese drei Zeilen in den header des scripts ein, das die Bildanzeige beinhalten soll (wichtig: in der Reihenfolge!!!) <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> und dann noch das css-file: <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> um lightbox zu aktivieren müsst ihr einfach nur noch ein rel="lightbox" attribut an den Link hängen der das Bild aufruft und schon funktioniert es ;-) Beispiel: <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a> wenn ihr jetzt eine Bildergalerie haben wollt, dann müsst ihr den gleichenschritt wie gerade eben machen, bloß noch zusätzlich einen "Gruppennamen" in Eckigen klammern [...] in das rel attribut schreiben. Beispiel: <a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a> <a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a> <a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a> das ganze ist Kinderleicht...ihr müsst nur die dateien speichern, in ordner verschieben, in das !!RICHTIGE!! verzeichnis Hochladen und die paar Zeilen Code einfügen und schon funktioniert es^^ ich hab auch nicht gedacht das es so einfach geht xD Viel Spaß, ich hoffe es hat euch was gebracht! lg Alex P.S. Bei fragen könnt ihr euch gerne an mich wenden. und als Beispiel lad ich hier noch ein Foto hoch ....